import { Button, Form, Input } from 'antd'
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

import useRsa from '@/hooks/useRsa'
// import styles from './index.module.less'

const PwdLogin = () => {
  const [form] = Form.useForm()
  const rasEncrypt = useRsa()

  // const [isLogin, setIsLogin] = useRecoilState(commonState.isLogin)
  const navigate = useNavigate() //路由编程导航
  // const [searchParams] = useSearchParams()

  useEffect(() => {
    const auto = JSON.parse(localStorage.getItem('autoLogin') || 'false')
    form.setFieldsValue({ auto })
  }, [])

  const onFinish = async (values: any) => {
    // form.submit()
    form.setFieldsValue({ password: rasEncrypt(values.password) })
    ;(document.getElementById('basic') as any).submit()
    // const formData = new FormData()
    // Object.keys(values).forEach((key) => {
    //   formData.append(key, values[key])
    // })
    // const res: any = await axios.post('/ivr/user/login', formData, {
    //   headers: {
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // })

    // //接口后续更改在做调整......
    // if (res.code === 200) {
    //   if (values.auto) {
    //     localStorage.setItem('token', 'byte:login')
    //   } else {
    //     sessionStorage.setItem('token', 'byte:login')
    //   }
    //   // setIsLogin(res.data)
    //   const redirect = searchParams.get('redirect')
    //   navigate(redirect || '/')
    // }
    // console.log('res', res)
  }
  //忘记密码
  // const changeStatus = () => {
  //   setForget(true)
  // }
  //注册账户
  const goRegister = () => {
    navigate('/register')
  }
  return (
    <div>
      <Form
        name="basic"
        method="post"
        action="/ivr/user/login"
        style={{ flex: 1 }}
        form={form}
        initialValues={{ auto: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="loginName"
          rules={[
            { required: true, message: '请输入账户名!' }
            // {
            //   pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, //正则校验手机号
            //   message: '请输入正确的手机号'
            // }
          ]}
        >
          <Input name="loginName" placeholder="账户" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            { required: true, message: '请输入密码!' }
            // {
            //   pattern: /^\S{6,16}$/,
            //   message: '请输入6-16位密码,区分大小写'
            // }
          ]}
        >
          <Input.Password name="password" placeholder="密码" />
        </Form.Item>

        {/* <div className="flex justify-between">
          <Form.Item
            name="auto"
            valuePropName="checked"
            // wrapperCol={{ offset: 0, span: 16 }}
          >
            <Checkbox>自动登录</Checkbox>
          </Form.Item>
          <a style={{ lineHeight: '32px' }} onClick={changeStatus}>
            忘记密码
          </a>
        </div> */}
        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
          <a onClick={goRegister} className="float-right pt-16px">
            注册账户
          </a>
        </Form.Item>
        {/* <Form.Item>

              </Form.Item> */}
      </Form>
    </div>
  )
}

export default PwdLogin
